<template>
    <div id="shopCart">
        <!-- 公共头部 -->
        <myHeader class="myHeader-bag" title="购物车">
             <!-- 左侧按钮插槽 -->
            <template #left>
                <i class="back-icon" @click="backFn"></i>
            </template>

            <!-- 右侧按钮插槽 -->
            <template #right>
                <span class="more-icon"></span>
            </template>
        </myHeader>

        <!-- 购物车头部 -->
        <div class="shopCart-head">
            <p class="shopCart-head-title">
                 <!-- 全选复选框 -->
                <van-checkbox v-model="checked" checked-color="#ee0a24" icon-size=.4rem @click="checkAllFn"></van-checkbox> 购物车
            </p>
            <p class="shopCart-head-explain">*左滑编辑商品</p>

        </div>

        <!-- 购物车列表 -->
        <shoppingList :checked="checked" @checked="getChecked"></shoppingList>

        <!-- 结算操作 -->
        <van-submit-bar :price="$store.getters.initTotal * 100" button-text="结算"  label="共计：" text-align="left" >
            <template #button>
                <van-button type="danger" @click="settlement">结算</van-button>
            </template>

            <template #default>
                <p class="submit-activity">满￥200可享受满减活动</p>
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
// 公共头部
import myHeader from '@/components/myHeader/myHeader'
// 购物车列表
import shoppingList from './shoppingList'
// 轻提示组件
import { Toast } from 'vant';

export default {
    components:{
        shoppingList,
        myHeader
    },
    data() {
        return {
            checked:true
        }
    },
    methods: {
        // 购物车全选功能
        checkAllFn(){
            this.$store.commit("checkAllFn",this.checked)
        },
        // 根据子组件传回的 checked 的值。判断是否全选
        getChecked(val){
            this.checked = val
            console.log(val);
        },
        // 点击结算判断是否登录/跳转订单结算页
        settlement(){
            if(localStorage.getItem("telPhone")){
                console.log("跳转订单确认页");
                this.$router.push({path:"orderComfirm"}).catch(err=>{});
            }else{
                Toast('请先登录');
                this.$router.push({path:"login"}).catch(err=>{});
                console.log("登录页");
            }
        },
        // 返回上一页
        backFn(){
            this.$router.go(-1)
        }
    },
}
</script>

<style lang="less" scoped>
#shopCart{
    background-color: #f6f6f6;
    // 购物车头部
    .shopCart-head{
        display: flex;
        justify-content: space-between;
        margin-top: 23px;
        .shopCart-head-title{
            font-size: 48px;
            margin-left: 38px;
            color: #727272;
        }
        .shopCart-head-explain{
            font-size: 20px;
            margin-top: 86px;
            margin-right: 24px;
            color: #a8a8a8;
        }
    }
    // 购物车头部 - end

    // 结算按钮
    .van-button--danger{
        width: 185px;
        height: 98px;
        margin-right: -32px;
    }

    .van-submit-bar__text{
        margin-top: -30px;
        margin-left: -260px;
        .van-submit-bar__price{
            font-size: 28px;
            color: black;
        }
    }
    .submit-activity{
        margin-top: 30px;
        font-size: 20px;
        color: #f89b8f;
    }
}

.myHeader-bag{
    background: #ffffff;
    color: black;
}
// 返回图标
.back-icon {
    display: block;
    background: url("../../../static/images/shoppingCart/back-icon.png") no-repeat 0 0;
    background-size: contain;
    width: 57px;
    height: 21px;
}

.more-icon {
    display: block;
    background: url("../../../static/images/shoppingCart/more-icon.png") no-repeat 0 0;
    background-size: contain;
    width: 57px;
    height: 21px;
}

.van-submit-bar{
    bottom: 99px;
    border-top: 1px solid #dfdfdf;
}

.van-checkbox{
    display: inline-block;
}

</style>
